Naker Back Viewer #
A standalone library to add 3D backgrounds on your website #
Getting Started #
Import the Javascript Back Viewer in the header of your website :
<script data-who='💎 Made with naker.io 💎' src='https://d23jutsnau9x47.cloudfront.net/back/v1.0.9/viewer.js' ></script>
This line will import the nakerback
global variable to your website.
Usage #
You then need to choose the html element which will be used to draw the background. You can just select this node by its id
like this :
var container = document.getElementById('container');
Use the render function of the viewer and your background options in order to automatically create your 3D illustration like so :
nakerback.render({
container: document.getElementById('container'),
});
Options #
You must also add some options to the render function. Type rgbArray:[r, g, b] and Vector3:{x:number, y:number, z:number}
Particle #
Name | Type | Description |
---|---|---|
texture | string | The texture of particles |
number | number | The number of particle to draw |
colorStart | rgbArray | Color of particle when it appears |
colorEnd | rgbArray | Color of particle when it desappears |
sizeStart | number | Size of particle when it appears |
sizeEnd | number | Size of particle when it desappears |
life | number | Size of particle when it desappears |
power | number | Movement power of particle when it appears |
direction1 | Vector3 | Direction of the particle when it appears |
direction2 | Vector3 | Second direction of the particle when it appears |
Environment #
Name | Type | Description |
---|---|---|
sensitivity | number | Sensitivity of the camera when the mouse move |
colorStart | rgbArray | Color of the top background |
colorEnd | rgbArray | Color of the top background |
gradient | ‘horizontal’, ‘vertical’ or ‘radial’ | The way the gradient is drawn |
Result #
At the end your render function will work like this:
nakerback.render({
container: document.getElementById('container'),
particle: {
direction1: {x:0,y:0,z:0},
direction2: {x:0,y:0,z:0},
life: 5.3,
power: 0.5,
texture: "https://res.cloudinary.com/naker-io/image/upload/v1566560053/circle_02.png",
number: 0,
colorStart: [89,173,220,0.63],
colorEnd: [198,199,230,0.87],
sizeStart: 2,
sizeEnd: 4
},
environment: {
sensitivity: 0.96,
colorStart: [0,0,0,1],
colorEnd: [234,0,255,1],
gradient: 'vertical'
}
});
Note that the container object will need to have a position style defined, as we use absolute position of the canvas which draw the back, without a position on the container the canvas could go outside. And if you want something to be shown in front of the 3D background, you might also need to add a z-index on it.
Plus if you need specific options, we are open to it. Send us an email to support@naker.io
Examples #
To see it in action, follow this link:
Back viewer